<template>
  <div class="my-container">
    <!-- 顶部用户信息区域 -->
    <view class="user-section">
      <view class="user-info">
        <image src="../../static/logo.png" class="avatar"></image>
        <view class="user-details">
          <text class="username">张毅</text>
          <text class="phone">18893209839</text>
        </view>
        <image src="../../static/icon-right.png" class="settings-icon" @click="navigateToPage('/pages/settings/settings')"></image>
      </view>
    </view>

    <!-- 优惠券卡片 -->
    <view class="coupon-card" @click="navigateToPage('/pages/coupons/coupons')">
      <text class="coupon-title">优惠券</text>
      <text class="coupon-count">3张</text>
    </view>

    <!-- 我的订单区域 -->
    <view class="order-section">
      <view class="order-header">
        <text class="order-title">我的订单</text>
        <view class="order-more" @click="navigateToPage('/pages/orderList/orderList')">
          <text>全部订单</text>
          <image src="../../static/icon-right.png" class="more-icon"></image>
        </view>
      </view>
      <view class="order-list">
        <view class="order-item" @click="navigateToPage('/pages/orderList/orderList?status=pending')">
          <image src="../../static/icon-car.png" class="order-icon"></image>
          <text class="order-text">待支付</text>
        </view>
        <view class="order-item" @click="navigateToPage('/pages/orderList/orderList?status=ongoing')">
          <image src="../../static/icon-my.png" class="order-icon"></image>
          <text class="order-text">待使用</text>
        </view>
        <view class="order-item" @click="navigateToPage('/pages/orderList/orderList?status=completed')">
          <image src="../../static/icon-index.png" class="order-icon"></image>
          <text class="order-text">待评价</text>
        </view>
      </view>
    </view>

    <!-- 我的服务网格 -->
    <view class="service-grid">
      <view class="service-item" @click="navigateToPage('/pages/couponCenter/couponCenter')">
        <image src="../../static/icon-Mapaddress.png" class="service-icon"></image>
        <text class="service-text">领券中心</text>
      </view>
      <view class="service-item" @click="navigateToPage('/pages/invite/invite')">
        <image src="../../static/icon-Myaddress.png" class="service-icon"></image>
        <text class="service-text">邀请好友</text>
      </view>
      <view class="service-item" @click="navigateToPage('/pages/myCars/myCars')">
        <image src="../../static/icon-car.png" class="service-icon"></image>
        <text class="service-text">我的车辆</text>
      </view>
      <view class="service-item" @click="navigateToPage('/pages/consumption/consumption')">
        <image src="../../static/icon-index.png" class="service-icon"></image>
        <text class="service-text">消费记录</text>
      </view>
      <view class="service-item" @click="navigateToPage('/pages/repair/repair')">
        <image src="../../static/icon-police.png" class="service-icon"></image>
        <text class="service-text">我的维修</text>
      </view>
      <view class="service-item" @click="navigateToPage('/pages/feedback/feedback')">
        <image src="../../static/icon-refresh.png" class="service-icon"></image>
        <text class="service-text">意见反馈</text>
      </view>
      <view class="service-item" @click="navigateToPage('/pages/address/address')">
        <image src="../../static/icon-address.png" class="service-icon"></image>
        <text class="service-text">收货地址</text>
      </view>
      <view class="service-item" @click="navigateToPage('/pages/more/more')">
        <image src="../../static/icon-my.png" class="service-icon"></image>
        <text class="service-text">更多</text>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-btn" @click="handleLogout">
      <text>退出登录</text>
    </view>
  </div>
</template>

<style scoped>
.my-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 顶部用户信息区域 */
.user-section {
  background-color: #2c7cf5;
  padding-top: 60rpx;
  padding-bottom: 40rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-right: 20rpx;
  border: 3rpx solid #fff;
}

.user-details {
  flex: 1;
}

.username {
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.phone {
  color: rgba(255, 255, 255, 0.8);
  font-size: 28rpx;
}

.settings-icon {
  width: 40rpx;
  height: 40rpx;
  color: #fff;
}

/* 优惠券卡片 */
.coupon-card {
  background-color: #fff;
  margin: 20rpx;
  padding: 30rpx;
  border-radius: 15rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.coupon-title {
  font-size: 32rpx;
  color: #333;
}

.coupon-count {
  font-size: 32rpx;
  color: #ff6b81;
  font-weight: bold;
}

/* 订单区域 */
.order-section {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 15rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.order-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.order-more {
  display: flex;
  align-items: center;
}

.order-more text {
  font-size: 28rpx;
  color: #999;
  margin-right: 10rpx;
}

.more-icon {
  width: 30rpx;
  height: 30rpx;
  color: #999;
}

.order-list {
  display: flex;
  justify-content: space-around;
}

.order-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.order-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.order-text {
  font-size: 26rpx;
  color: #666;
}

/* 服务网格 */
.service-grid {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 15rpx;
  padding: 30rpx 0;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20rpx;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.service-icon {
  width: 70rpx;
  height: 70rpx;
  margin-bottom: 15rpx;
}

.service-text {
  font-size: 26rpx;
  color: #666;
}

/* 退出登录按钮 */
.logout-btn {
  background-color: #fff;
  margin: 40rpx 20rpx;
  padding: 30rpx;
  border-radius: 15rpx;
  text-align: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.logout-btn text {
  color: #333;
  font-size: 32rpx;
}
</style>

<script setup>
import { ref } from 'vue';

// 页面跳转函数
const navigateToPage = (url) => {
  uni.navigateTo({
    url: url,
    fail: (err) => {
      console.log('跳转失败:', err);
      // 如果页面不存在，显示提示
      uni.showToast({
        title: '功能暂未开放',
        icon: 'none'
      });
    }
  });
};

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: '退出登录',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 清除登录状态
        uni.removeStorageSync('isLogin');
        uni.removeStorageSync('userData');
        
        uni.showToast({ 
          title: '已退出登录', 
          icon: 'success' 
        });
        
        // 刷新页面
        setTimeout(() => {
          uni.redirectTo({ url: '/pages/my/my' });
        }, 1500);
      }
    }
  });
};
</script>


